<template>
    <div style="height: 95%;width: 100%;display:flex;justify-content:center;padding-top: 20px">
        <!--弹框DIV 设置弹框的大小的地方-->
        <div style="background: #fff;width: 700px;height: 600px;box-shadow: #D3DCE6 0px 0px 20px;">
            <div style="height:520px;border: #1C84C6;margin-top: 25px" class="scrollbar">
                <div style="height: 30px;">
                    <!--标题-->
                    <span style="font-size: 18px;margin-left: 25px;">
                        联系人信息
                    </span>
                    <span style="margin-left: 530px">
                        <i slot="suffix" style="font-size: 30px;color: #D3DCE6" class="el-icon-close" @click="gotoQx"></i>
                    </span>
                </div>
                <!--height:91%;表单在弹框显示多长-->
                <el-scrollbar style="height:91%;padding-top: 20px;">
                    <div class="shugan"></div>
                    <span style="margin-left: 10px;font-size: 14px;">基本信息</span>
                    <!--表单-->
                    <el-form :rules="rules" style="margin-top:30px;margin-left: 30px;" :model="linkmanList" size="mini" ref="linkmanList">
                        <el-row>
                            <el-col :span="12">
                                <el-form-item style="width:250px;" prop="linkmanName">
                                    <label slot="label" style="font-size: 13px">姓名：</label>
                                    <el-input v-model="linkmanList.linkmanName"></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item style="width:250px" prop="clientId">
                                    <label slot="label" style="font-size: 13px">客户名称：</label>
                                    <el-popover style="width: 700px; height: 450px;" placement="right" trigger="click" v-model="kehu">
                                        <span style="font-size:20px;">关联客户模块</span>
                                        <br/>
                                        <el-input @keyup.enter.native="initData" v-model="kehuinput" style="width: 210px; margin-left: 230px; margin-bottom: 10px;">
                                            <i slot="suffix" class="el-input__icon el-icon-search" @click="initData"></i>
                                        </el-input>
                                        <el-button type="primary" style="margin-left: 130px;" @click="xjkh">新 建</el-button>
                                        <el-table highlight-current-row border ref="kehulist" :data="kehulist">
                                            <el-table-column type="selection" width="50" align="center" property="clientId"></el-table-column>
                                            <el-table-column width="150" property="clientName" label="客户名称"></el-table-column>
                                            <el-table-column width="100" property="clientRank" label="级别"></el-table-column>
                                            <el-table-column width="150" property="clientMobile" label="手机号码"></el-table-column>
                                            <el-table-column width="200" property="clientSite" label="地址"></el-table-column>
                                        </el-table>
                                        <el-pagination @size-change="handleSizeChange" @current-change="changePage" :current-page.sync="currPage"
                                                       :page-size="pageSize" layout="total, prev, pager, next" :total="totalSize" >
                                        </el-pagination>
                                        <div style="text-align: center;width: 100%" class="dialog-footer">
                                            <el-button type="primary" @click="xzkehu">保 存</el-button>
                                            <el-button type="primary" @click="kehu = false">取 消</el-button>
                                        </div>
                                            <el-input v-if="this.xg==0" v-model="linkmanList.clientId.clientName"
                                                  placeholder="+添加" slot="reference" :readonly='true' style="width: 250px;"></el-input>
                                    </el-popover>
                                    <el-input v-if="this.xg==1" :disabled="true" v-model="linkmanList.clientId.clientName"
                                              placeholder="+添加" :readonly='true' style="width: 250px;"></el-input>
                                    <el-input v-if="this.xg==2" :disabled="true" v-model="linkmanList.clientId.clientName"
                                              placeholder="+添加" :readonly='true' style="width: 250px;"></el-input>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="12">
                                <el-form-item style="width:250px;" prop="linkmanPhone">
                                    <label style="font-size: 13px">电话：</label>
                                    <el-input v-model="linkmanList.linkmanPhone"></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item style="width:250px;" prop="empId">
                                    <label style="font-size: 13px">负责人：</label>
                                    <el-popover style="width: 700px; height: 450px;" placement="right"
                                                trigger="click" v-model="kehu2">
                                        <span style="font-size:20px;">关联员工模块</span>
                                        <el-input @keyup.enter.native="initDatayg" v-model="empinput"
                                                  style="width: 210px; margin-left: 200px; margin-bottom: 10px;">
                                            <i slot="suffix" class="el-input__icon el-icon-search" @click="initDatayg"></i>
                                        </el-input>
                                        <el-table highlight-current-row border ref="emplist" :data="emplist">
                                            <el-table-column type="selection" width="50" align="center" property="empId"></el-table-column>
                                            <el-table-column width="150" property="empId" label="ID"></el-table-column>
                                            <el-table-column width="150" property="empName" label="姓名"></el-table-column>
                                            <el-table-column width="200" property="depId.depName" label="部门"></el-table-column>
                                        </el-table>
                                        <el-pagination @size-change="handleSizeChangeyg" @current-change="changePageyg" :current-page.sync="currPageyg"
                                                       :page-size="pageSizeyg" layout="total, prev, pager, next" :total="totalSizeyg" >
                                        </el-pagination>
                                        <div style="text-align: center;width: 100%" class="dialog-footer">
                                            <el-button type="primary" @click="xzemp">保 存</el-button>
                                            <el-button type="primary" @click="kehu2 = false">取 消</el-button>
                                        </div>
                                        <el-input v-if="this.xg2==0" v-model="linkmanList.empId.empName" placeholder="+添加" slot="reference" :readonly='true' style="width: 250px;"></el-input>
                                    </el-popover>
                                    <el-input v-if="this.xg2==1" :disabled="true" v-model="linkmanList.empId.empName" placeholder="+添加" :readonly='true' style="width: 250px;"></el-input>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="12">
                                <el-form-item style="width:250px;" prop="linkmanMobile">
                                    <label style="font-size: 13px">手机：</label>
                                    <el-input v-model="linkmanList.linkmanMobile"></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item style="width:250px;" prop="emailAddress">
                                    <label style="font-size: 13px">电子邮箱：</label>
                                    <el-input v-model="linkmanList.emailAddress"></el-input>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="12">
                                <el-form-item style="width:250px;" prop="keyPolicymaker">
                                    <label style="font-size: 13px">是否关键决策人：</label>
                                    <el-select v-model="linkmanList.keyPolicymaker" placeholder="请选择" style="width:250px;">
                                        <el-option v-for="item in lxrjcr" :key="item.valuejcr"
                                                   :label="item.labeljcr" :value="item.valuejcr">
                                        </el-option>
                                    </el-select>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item style="width:250px;" prop="linkmanPosition">
                                    <label style="font-size: 13px">职务：</label>
                                    <el-input v-model="linkmanList.linkmanPosition"></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="24">
                                <el-col :span="12">
                                    <el-form-item style="width:250px" prop="linkmanSex">
                                        <label slot="label" style="font-size: 13px">性别：</label>
                                        <el-select v-model="linkmanList.linkmanSex" placeholder="请选择" style="width:250px;">
                                            <el-option v-for="item in lxrxb" :key="item.valuexb"
                                                       :label="item.labelxb" :value="item.valuexb">
                                            </el-option>
                                        </el-select>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="12">
                                    <el-form-item style="width:250px;" prop="linkmanBirthday">
                                        <label style="font-size: 13px">客户生日：</label>
                                        <el-date-picker v-model="linkmanList.linkmanBirthday" align="right" type="date" style="width: 250px; "
                                                        placeholder="选择日期" :picker-options="pickerOptions">
                                        </el-date-picker>
                                    </el-form-item>
                                </el-col>
                            </el-col>
                            <el-col :span="24">
                                <el-col :span="12">
                                    <el-form-item style="width:250px;" prop="linkmanSite">
                                        <label style="font-size: 13px">地址：</label>
                                        <!--el-cascader级联（城市选择器）-->
                                        <el-cascader v-model="address" :options="options" ref="cascaderAddr" clearable
                                                     style="width: 250px;" filterable @change="handleChange" placeholder="选择地址">
                                        </el-cascader>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="12">
                                    <el-form-item style="width:250px;" prop="linkmanTime">
                                        <label style="font-size: 13px">下次联系时间：</label>
                                        <el-date-picker v-model="linkmanList.linkmanTime" align="right" type="datetime"
                                                        style="width: 250px; " placeholder="选择日期" :picker-options="pickerOptions2">
                                        </el-date-picker>
                                    </el-form-item>
                                </el-col>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item style="width:250px;" prop="linkmanSitexq">
                                    <label style="font-size: 13px">详情地址：</label>
                                    <el-input v-model="linkmanList.linkmanSitexq"></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="24">
                                <el-form-item style="width:250px;">
                                    <label style="font-size: 13px">备注：</label>
                                    <textarea v-model="linkmanList.linkmanRemark" style="width: 580px;"></textarea>
                                </el-form-item>
                            </el-col>
                        </el-row>
                    </el-form>
                </el-scrollbar>
                <!--确定按钮 设置了固定定位-->
                <div style="text-align: center;width: 80%;position: absolute;top:635px;left:230px;" class="dialog-footer">
                    <el-button @click="gotoQx">取 消</el-button>
                    <el-button type="primary" @click="yesok('linkmanList')">确 定</el-button>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import Crypto from "../router/secret";
    import cities from '../router/cities.js'

    export default {
        name: "TfyNewClues",
        data(){
            var emp = (rule, value, callback) => {
                if (value.empName === null || value.empName === '') {
                    callback(new Error('请选择负责人'));
                }else {
                    callback()
                }
            };
            var client = (rule, value, callback) => {
                if (value.clientName === null || value.clientName === '') {
                    callback(new Error('请选择客户'));
                }else {
                    callback()
                }
            };
            var dianhua = (rule, value, callback) => {
                if(!value){
                    callback(new Error('请输入电话号码'));
                }else {
                    if(!/^((0\d{2,3}-\d{7,8})|(1[3584]\d{8}))$/.test(value)){
                        callback(new Error('请输入正确的电话号码'));
                    }else {
                        callback()
                    }
                }
            };
            var shouji = (rule, value, callback) => {
                if(!value){
                    callback(new Error('请输入手机号码'));
                }else {
                    if(!(/^1[3456789]\d{9}$/.test(value))){
                        callback(new Error('请输入正确的手机号码'));
                    }else {
                        callback()
                    }
                }
            };
            return{
                rules: {
                    linkmanName:[{ required: true, message: '请输入姓名' , trigger: 'change'},],
                    clientId:[{ validator: client, required: true, trigger: ['blur','change']},],
                    linkmanPhone:[{ validator: dianhua, required: true, trigger: ['blur','change']},],
                    empId:[{ validator: emp, required: true, trigger: ['blur','change']},],
                    linkmanMobile:[{required: true, validator: shouji, trigger: ['blur','change']},],
                    linkmanBirthday:[{ required: true, message: '请选择客户生日' , trigger: 'change'},],
                    linkmanSex:[{ required: true, message: '请选择性别' , trigger: 'change'},],
                    keyPolicymaker:[{ required: true, message: '请选择是否关键决策人' , trigger: 'change'},],
                    linkmanSite:[{ required: true, message: '请选择地址' , trigger: 'change'},],
                    linkmanTime:[{ required: true, message: '请选择下次联系时间' , trigger: 'change'},],
                },
                options: cities,
                address:[],
                checked: true,
                //快捷日期选择器
                pickerOptions: {
                    disabledDate(time) {
                        return time.getTime() > Date.now();
                    },
                    shortcuts: [{
                        text: '今天',
                        onClick(picker) {
                            picker.$emit('pick', new Date());
                        }
                    }, {
                        text: '昨天',
                        onClick(picker) {
                            const date = new Date();
                            date.setTime(date.getTime() - 3600 * 1000 * 24);
                            picker.$emit('pick', date);
                        }
                    }, {
                        text: '一周前',
                        onClick(picker) {
                            const date = new Date();
                            date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
                            picker.$emit('pick', date);
                        }
                    }]
                },
                pickerOptions2: {
                    disabledDate(time) {
                        return time.getTime() < Date.now();
                    },
                    shortcuts: [{
                        text: '今天',
                        onClick(picker) {
                            picker.$emit('pick', new Date());
                        }
                    }]
                },
                lxrjcr: [{
                    valuejcr: '是',
                    labeljcr: '是'
                }, {
                    valuejcr: '否',
                    labeljcr: '否'
                }],
                valuejcr: '',

                lxrxb: [{
                    valuexb: '男',
                    labelxb: '男'
                },{
                    valuexb: '女',
                    labelxb: '女'
                },  {
                    valuexb: '未知',
                    labelxb: '未知'
                }],
                valuexb:'',
                lxrtiem:'',//下次联系时间
                lxrsr:'',//客户生日
                khbd:[],//客户表单
                linkmanList:{//表单
                    linkmanId:0,
                    clientId:{
                        clientId:0,
                        updateTime:'',
                        clientIndustry:'',
                        clientSource:'',
                        clientUrl:'',
                        establishPerson:'',
                        establishTime:'',
                        clientName:'',
                        clientRank:'',
                        clientPhone:'',
                        clientMobile:'',
                        clientSite:'',
                        clientSitexq:'',
                        clientRemark:'',
                        clientPeople:'',
                        clientCjpeople:'',
                        clientState:0,
                    },
                    empId:{
                        empId:0,
                        empName:'',
                        depId:{//部门
                            depId:0,
                            depName:'',
                        },
                    },
                    linkmanName:'',//联系人名称
                    linkmanPhone:'',//联系人电话号码
                    linkmanMobile:'',//联系人手机号码
                    emailAddress:'',//联系人电子邮箱
                    keyPolicymaker:'',//联系人是否关键决策人
                    linkmanPosition:'',//联系人职位
                    linkmanSex:'',//联系人性别
                    linkmanSite:'',//联系人地址
                    linkmanSitexq:'',
                    linkmanTime:'',//联系人下次联系时间
                    linkmanRemark:'',//联系人备注
                    linkmanBirthday:'',//联系人出生日期
                    linkmanSz:'',
                    },
                kehu:false,//客户弹出框
                kehuinput:'',//客户弹框搜索框
                kehulist:[],//客户表格信息
                pageSize:5,//客户分页页大小
                currPage:1,//客户当前页码，默认为1
                totalSize:0,//客户总记录数
                pageSize2:5,//回款分页页大小
                currentpage2:1,//回款当前页码，默认为1
                totalSize2:0,//回款总记录数

                kehu2:false,//员工弹出框
                empinput:'',//员工弹框搜索框
                emplist:[],//员工表格信息
                pageSizeyg:5,//员工分页页大小
                currPageyg:1,//员工当前页码，默认为1
                totalSizeyg:0,//员工总记录数
                xg:'',
                xg2:'',
            }
        },
        methods:{
            yesok(formName) {
                if(this.xg != 0){
                    this.addlinkman();
                }else{
                    this.$refs[formName].validate(valid => {
                        this.print(valid);
                        window.console.log(valid)
                        if (valid) {
                            this.addlinkman();
                        }else{
                            this.$message({
                                message: '验证不通过！',
                                type: 'warning'
                            });
                            return false;
                        }
                    });
                }
            },
            cxkh(rows){//根据客户id查询
                this.$axios.post("http://localhost:8088/clientid-list",this.qs.stringify(
                    {clientId:rows}))
                .then(v=>{
                    this.linkmanList.clientId = v.data;
                    window.console.log("值："+this.linkmanList.clientId);
                    window.console.log("值2："+v.data);
                }).catch()
            },
            //新增联系人
            addlinkman(){
                if(this.xg==0){
                        this.$axios.post("http://localhost:8088/addlinkman-list",this.linkmanList)
                            .then(()=>{
                                this.$message({
                                    showClose: true,
                                    type: 'success',
                                    message: '新增成功!',
                                });
                                this.$router.push({
                                    path:'/tfylxr'
                                });
                            }).catch(()=>{
                                this.$message({
                                    showClose: true,
                                    message: '新增失败',
                                    type: 'error'
                                });
                            }
                        )
                }else if(this.xg==2){
                    this.$axios.post("http://localhost:8088/addlinkman-list",this.linkmanList)
                        .then(()=>{
                            this.$message({
                                showClose: true,
                                type: 'success',
                                message: '新增成功!',
                            });
                            this.$router.push({
                                path:'/tfylxr'
                            });
                        }).catch(()=>{
                            this.$message({
                                showClose: true,
                                message: '新增失败',
                                type: 'error'
                            });
                        }
                    )
                } else{
                    this.$axios.post("http://localhost:8088/addlinkman-list",this.linkmanList)
                        .then(()=>{
                            this.$message({
                                showClose: true,
                                type: 'success',
                                message: '修改成功!',
                            });
                            this.$router.push({
                                path:'/tfylxr'
                            });
                        }).catch(()=>{
                        this.$message({
                            showClose: true,
                            message: '修改失败',
                            type: 'error'
                        });
                    })
                }
            },
            //选择客户确定按钮
            xzkehu() {
                this.$refs.kehulist.selection.forEach((pro)=>{
                    this.linkmanList.clientId=pro;
                });
                this.kehu=false;
                this.kehuinput='';
            },
            //客户查询方法
            initData(){
                this.$axios.post("http://localhost:8088/client-list",this.qs.stringify(
                    {search:this.kehuinput, page:this.currPage, size:this.pageSize,}))
                    .then(v=>{
                        this.kehulist = v.data.rows;
                        this.totalSize = v.data.total;
                    })
                    .catch()
            },
            changePage(v){
                this.currPage = v;
                this.initData();
            },

            //选择员工确定按钮
            xzemp() {
                this.$refs.emplist.selection.forEach((pro)=>{
                    this.linkmanList.empId=pro;
                    window.console.log("id"+this.linkmanList.empId)
                });
                this.kehu2=false;
                this.empinput='';
            },
            //员工查询方法
            initDatayg(){
                this.$axios.post("http://localhost:8088/findemp-list",this.qs.stringify(
                    {search:this.empinput, page:this.currPageyg, size:this.pageSizeyg,}))
                    .then(v=>{
                        this.emplist = v.data.rows;
                        window.console.log("yg:"+this.emplist)
                        this.totalSizeyg = v.data.total;
                    })
                    .catch()
            },
            changePageyg(v){
                this.currPageyg = v;
                this.initDatayg();
            },
            xglinkmanxq(){//详情联系人修改查询
                this.xg = 1;
                var linkmanId = Crypto.get(unescape(this.$route.query.linkmanId));
                this.$axios.get("http://localhost:8088/cxlinkmanclient-list", {params:{linkmanId:linkmanId}})
                    .then(v=>{
                        this.linkmanList = v.data;
                    }).catch();
            },
            // 获取省市区地址级联
            handleChange(e, form, thsAreaCode) {
                thsAreaCode = this.$refs['cascaderAddr'].getCheckedNodes()[0].pathLabels// 注意2： 获取label值
                window.console.log(thsAreaCode);// 注意3： 最终结果是个一维数组对象
                window.console.log(thsAreaCode[0] + thsAreaCode[1] + thsAreaCode[2]);
                const checkedNodes = this.$refs['cascaderAddr'].getCheckedNodes();
                window.console.log(checkedNodes[0].pathLabels); // 获取由 label 组成的数组
                //省市区赋值
                this.linkmanList.linkmanSite = thsAreaCode[0] +'/'+ thsAreaCode[1] +'/'+ thsAreaCode[2];
                this.linkmanList.linkmanSz = e[0] +'/'+ e[1] +'/'+ e[2];
                this.address=e;
                window.console.log(typeof e);
                window.console.log(e);
                window.console.log("结果1"+e);
                window.console.log("结果2"+form);
                window.console.log("结果3"+thsAreaCode);
            },
            handleSizeChangeyg(val){
                window.console.log('每页${val}条')
                this.initDatayg(1,this.pageSizeyg=val,this.emplist)
            },
            handleSizeChange(val){
                window.console.log('每页${val}条')
                this.initData(1,this.pageSize=val,this.kehulist)
            },
            xjkh(){
                this.$router.replace('/xjkh')
            },
            gotoQx(){
                this.$router.replace('/tfylxr')
            },
            gotokh(){
                this.$router.replace('/xjkh')
            }
        },
        created: function () {
            if(this.$route.query.key!=null){//修改初始化
                this.linkmanList=this.$route.query.key;
                this.xg = 1;
                this.xg2 = 1;
                this.address = this.linkmanList.linkmanSz.split('/');//
            }
            this.initData();
            this.initDatayg();
            if(this.$route.query.linkmanId){
                this.xglinkmanxq();
            }

            if(this.$route.query.row != null){
                this.xg=1;
                window.console.log("khz:"+this.$route.query.row)
                this.cxkh(this.$route.query.row);
            }

            if(this.$route.query.clientId != null){
                this.xg=2;
                window.console.log("khz:"+this.$route.query.clientId)
                this.cxkh(this.$route.query.clientId);
            }
        },
    }
</script>

<style scoped>
    .shugan{
        border-left-color: rgb(70, 205, 207);
        border-left-width: 1.8px;
        height: 10px;
        border-left-style: solid;
        display: inline;
        font-size: 13px;
        margin-left: 25px;
    }

    .el-scrollbar__wrap {
        overflow: scroll;
        width: 120%;
        height: 100%;
    }
</style>